<template>
    <div>
        <h2>你好：{{userinfo.username}}同学</h2>


        <el-form :model="passForm" status-icon :rules="rules" ref="passForm" label-width="100px" class="demo-passForm">
            <el-form-item label="新密码" prop="pass">
                <el-input type="password" v-model="passForm.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="passForm.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="currentPass">
                <el-input type="password" v-model="passForm.currentPass" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('passForm')">提交</el-button>
                <el-button @click="resetForm('passForm')">重置</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>
<script>
export default {
    data() {
        var validate = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"))
            } else if (value !== this.passForm.password) {
                callback(new Error("两次输入密码不一致"))
            } else {
                callback();
            }
        };
        return {
            userinfo: {},
            passForm: {
                pass: '',
                checkPass: '',
                currentPass: '',
            },
            rules: {
                pass: [
                    { required: true, message: '请输旧密码', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                checkPass: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                currentPass: [
                    { required: true, message: '请确认密码', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],

            }
        };
    },
    created() {
        this.getUserinfo()
    },

    methods: {
        getUserinfo() {
            this.$axios.get("/sys/userinfo").then(data => {
                console.log(1111, data.data.data)
                this.userinfo = data.data.data

            })

        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    const _this = this
                    this.$axios.post("/sys/updata", this.passForm).then(data => {
                        console.log(1111, data)
                        _this.$alert(data.data.msg, "提示", {
                            confirmButtonText: "确定",
                            callback: action => {
                                this.$message({
                                    type: 'info',
                                    message: `action: ${action}`
                                });
                            }
                        })

                    })

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>